<template>
  <div class="menu-nav">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs">
      <el-tab-pane
        class="tabs-item"
        v-for="item in tabs"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  name: 'menu-nav',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const activeName = ref('/main/findmucis/stylemusic')
    activeName.value = route.path
    const tabs = ref([
      { label: '个性推荐', name: '/main/findmucis/stylemusic' },
      { label: '歌单', name: '/main/findmucis/songslist' },
      { label: '主播电台', name: '/main/findmucis/anchorstation' },
      { label: '排行榜', name: '/main/findmucis/rankinglist' },
      { label: '歌手', name: '/main/findmucis/singersearch' },
      { label: '最新音乐', name: '/main/findmucis/newsmusic' }
    ])

    const handleClick = (tab: any) => {
      router.replace(tab.props.name)
      activeName.value = tab.props.name
    }
    return {
      tabs,
      activeName,
      handleClick
    }
  }
})
</script>

<style scoped>
.tabs .el-tabs__item {
  /* border: 1px solid white; */
  /* background: rgba(255, 255, 255, 0.5); */
  padding: 0 10px;
  text-align: center;
  border-radius: 5px;
  color: rgba(0, 0, 0, 0.5);
}
.rt-top {
  width: 100%;
  text-align: center;
}
.tabs {
  display: flex;
  justify-content: center;
}
</style>
